import React, { useEffect, useState, FC } from 'react'
import { useTranslation } from 'react-i18next'
import http from '@/api/request'
import { useNavigate } from 'react-router-dom'

const CenterLeft: FC = () => {
  const [data, setData] = useState([])
  const [Alldata, setAlldata] = useState([])
  const { t } = useTranslation()
  const navigate: any = useNavigate()
  useEffect(() => {
    void http.get('/wipi/api/article').then((res) => {
      setData(res.data[0])
      // console.log(res.data)
    })
    void http.get('/wipi/api/article/all/recommend').then((res) => {
      setAlldata(res.data)
      // console.log(res.data)
    })
  }, [])
  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-unused-vars
  const times = (t: any) => {
    return t.slice(0, 10)
  }
  return (
    <div>
      <div style={{ textAlign: 'center' }}>
        <li> <span>{t('header.archives')}</span> </li>
        <li> {t('total')} <span>{data.length + Alldata.length}</span>  {t('count')}</li>
      </div>
       <h3>2022</h3>
      {data.map((item: any, index: number) => {
        return <li key={index} onClick={() => navigate('/detail', { state: item })}> <b>{times(item.createAt)}</b> {item.title}</li>
      })}

 {Alldata.map((item: any, index: number) => {
   return <li key={index} onClick={() => navigate('/detail', { state: item })}><b>{times(item.createAt)}</b> {item.title}</li>
 })}
    </div>
  )
}

export default CenterLeft
